<template>
  <div class="drill-detail-container">
    <el-form inline>
      <el-form-item>
        <el-button type="primary" @click="onPublish1">查看已提交处理意见</el-button>
        <el-button type="primary" :disabled="!this.activeWantToBe.id" @click="onPublish2">提交处理意见</el-button>
      </el-form-item>
    </el-form>
    <div class="drill-detail">
      <div class="drill-detail-left">
        <div class="time-wrapper">
          <div class="time-box tianwen">
            <div class="title">天文时间</div>
            <div class="time">{{ time.tianwen }}</div>
          </div>
          <div class="time-box zuozhan">
            <div class="title">作战时间</div>
            <div class="time">{{ time.zuozhan }}</div>
          </div>
        </div>
        <div class="step-wrapper">
          <el-timeline>
            <el-timeline-item
              v-for="(item) in wantToBeList"
              :key="item.id"
              :icon="activeWantToBe.id === item.id ? 'el-icon-caret-right' : ''"
              :color="activeWantToBe.id === item.id ? '#00A56D' : ''"
              size="large"
              placement="top"
              :timestamp="item.releaseTime"
            >
              <div @click="handleCheckedWantToBe(item)">
                <el-card
                  :class="[activeWantToBe.id === item.id ? 'active' : '']"
                  shadow="never"
                >
                  <div slot="header" class="clearfix">
                    <span>{{ item.scenarioName }}</span>
                    <el-tag style="float: right;">{{item.releaseScenarioTypeText + item.scenarioTypeText }}</el-tag>
                  </div>
                  <div class="description">{{ item.scenarioDesc }}</div>
                </el-card>
              </div>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
      <div class="drill-detail-right">
        <div class="drill-detail-right-top">
          <div
            :class="['tab-item',activeTab.name === item.name ? 'active' : '']"
            v-for="item in tabsList"
            :key="item.name"
            @click="handleCheckTab(item)"
          >
            <el-image
              style="width: 26px; height: 26px"
              :src="activeTab.name === item.name ? item.activeimg  : item.img"
            ></el-image>
            <p>{{ item.name }}</p>
          </div>
        </div>
        <div class="drill-detail-right-bottom">
          <component
            :is="activeTab.id"
            :drill-id="drillId"
            :want-to-be-id="activeWantToBe.maneuverId"
            :detail="xiangdingDetail"
          ></component>
        </div>
      </div>
    </div>
    <el-dialog
      append-to-body
      width="600px"
      title="提交处置意见"
      :visible.sync="dialogValue"
      @close="emitClose"
    >
      <el-form ref="formRef" :model="ruleForm" :rules="rules" label-width="100px">
        <el-form-item label="标题" prop="opinionTitle">
          <el-input v-model="ruleForm.opinionTitle"></el-input>
        </el-form-item>
        <el-form-item label="正文" prop="opinionContent">
          <el-input type="textarea" v-model="ruleForm.opinionContent"></el-input>
        </el-form-item>
        <el-form-item label="附件">
          <UploadFile v-if="dialogValue" list-type="none" :list="ruleForm.files" ref="fileRef1" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="emitClose">取 消</el-button>
        <el-button type="primary" @click="emitSave">提 交</el-button>
        <el-button type="primary">推荐辅助</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { drillDetailAPI as request, wantToBeAPI } from "@/api";
import { dateFormatter } from "@/utils";
import Tab1 from "./tab1.vue";
import Tab2 from "./tab2.vue";
import Tab3 from "./tab3.vue";
import Tab4 from "./tab4.vue";
export default {
  components: {
    Tab1,
    Tab2,
    Tab3,
    Tab4,
  },
  data() {
    return {
      request: request,
      drillId: "",
      wantToBeList: [],
      time: {
        tianwen: "--",
        zuozhan: "--",
      },
      timeInterval: null,
      // 默认选中的想定进度
      activeWantToBe: {},
      tabsList: [
        {
          id: "Tab1",
          activeimg: require("@/assets/img/想定详情_active.png"),
          img: require("@/assets/img/想定详情.png"),
          name: "想定详情",
        },
        {
          id: "Tab2",
          activeimg: require("@/assets/img/动态地图_active.png"),
          img: require("@/assets/img/动态地图.png"),
          name: "动态地图",
        },
        {
          id: "Tab3",
          activeimg: require("@/assets/img/想定图片_active.png"),
          img: require("@/assets/img/想定图片.png"),
          name: "想定图片",
        },
        {
          id: "Tab4",
          activeimg: require("@/assets/img/想定视频_active.png"),
          img: require("@/assets/img/想定视频.png"),
          name: "想定视频",
        },
      ],
      activeTab: {
        id: "Tab1",
        img: require("@/assets/img/想定详情.png"),
        activeimg: require("@/assets/img/想定详情_active.png"),
        name: "想定详情",
      },
      // 想定详情
      xiangdingDetail: {},
      // 自建流转详情
      dialogValue: false,
      ruleForm: {
        opinionTitle: "",
        opinionContent: "",
        files: [],
      },
      rules: {
        opinionTitle: [{ required: true, message: "标题不能为空" }],
      },
      participants: [],
    };
  },
  created() {
    document.title = "进入演习";
    this.timeInterval = setInterval(() => {
      this.time.tianwen = dateFormatter(new Date().getTime());
      if (this.time.fightZeroTime && this.time.zeroHour) {
        this.time.zuozhan = dateFormatter(
          this.time.fightZeroTime - this.time.zeroHour + new Date().getTime()
        );
      }
    }, 1000);
    this.drillId = this.$route.params.id;
    this.initData();

    //定时器
    const timer= setInterval(() =>{
      // 想定列表
      this.getWantToBeListById();
    }, 60000)
    // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
    this.$once('hook:beforeDestroy', () => {
        clearInterval(timer)
    })

  },
  beforeDestroy() {
    clearInterval(this.timeInterval);
    this.timeInterval = null;
  },
  methods: {
    // 发布预设想定
    onPublish1() {
      this.$router.push({
        path: "/drill-options-history/" + this.$route.params.id,
      });
    },
    // 发布特情
    onPublish2() {
      this.ruleForm = {
        opinionTitle: "",
        opinionContent: "",
        files: [],
      };
      this.$nextTick(() => {
        this.$refs.formRef.clearValidate();
      });
      this.dialogValue = true;
    },
    initData() {
      // 获取作战时间
      this.getZuozhanDate();
      // 想定列表
      this.getWantToBeListById();
    },
    getZuozhanDate() {
      this.request.getDate(this.drillId).then((res) => {
        this.time = {
          ...this.time,
          ...res,
        };
      });
    },
    getWantToBeListById() {
      const scenarioTypeObj = ["想定", "特情", "处置意见"];
      const releaseScenarioTypeObj = ["", "单方·"];
      this.request.wantToBeList(this.drillId).then((res) => {
        this.wantToBeList = (res || []).map((el) => {
          return {
            ...el,
            scenarioTypeText: scenarioTypeObj[el.scenarioType],
            releaseScenarioTypeText:
              el.scenarioType == 2 ? '' : releaseScenarioTypeObj[el.releaseScenarioType],
            releaseTime: dateFormatter(el.releaseTime),
          };
        });
        if (this.wantToBeList.length && !this.activeWantToBe.id) {
          this.activeWantToBe = { ...this.wantToBeList[0] };
          this.getWantToBeDetail(this.activeWantToBe.scenarioId);
        }
      });
    },
    getWantToBeDetail(id) {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
      });
      wantToBeAPI.read(id).then((res) => {
        this.activeTab = {};
        this.$nextTick(() => {
          this.activeTab = {
            id: "Tab1",
            img: require("@/assets/img/想定详情.png"),
            activeimg: require("@/assets/img/想定详情.png"),
            name: "想定详情",
          };
          this.xiangdingDetail = res;
          loading.close()
        });
      });
    },
    //选中想定
    handleCheckedWantToBe(item) {
      this.activeWantToBe = { ...item };
      this.getWantToBeDetail(this.activeWantToBe.scenarioId);
    },
    // 选中tab
    handleCheckTab(item) {
      this.activeTab = item;
    },
    emitClose() {
      this.dialogValue = false;
    },
    emitSave() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          const { addList, removeList } = this.$refs.fileRef1.getList();
          const formData = new FormData();
          formData.append("maneuverScenarioRelaId", this.activeWantToBe.id);
          formData.append("maneuverId", this.activeWantToBe.maneuverId);
          formData.append("scenarioId", this.activeWantToBe.scenarioId);
          formData.append("opinionTitle", this.ruleForm.opinionTitle);
          formData.append("opinionContent", this.ruleForm.opinionContent);
          addList.forEach((el) => {
            formData.append("files", el);
          });
          removeList.forEach((el) => {
            formData.append("fileIds", el);
          });
          this.request.createHandleOptions(formData).then((res) => {
            this.getWantToBeListById();
            this.emitClose();
          });
        }
      });
    },
  },
};
</script>
<style lang="less">
@import "~@/assets/css/common.less";
.drill-detail-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.drill-detail {
  flex-grow: 1;
  overflow: hidden;
  display: flex;
  .drill-detail-right {
    flex-grow: 1;
    .drill-detail-right-top {
      width: 100%;
      height: 80px;
      background: @primary;
      border: 0px solid #dbe0eb;
      border-radius: 8px;
      margin-bottom: 15px;
      display: flex;
      justify-content: center;
      align-items: center;
      .tab-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 92px;
        height: 67px;
        border-radius: 8px;
        cursor: pointer;
        color: #ffffff;
        &.active {
          background: #ffffff;
          color: #494a4c;
        }
        p {
          color: inherit;
          font-size: 13px;
          font-weight: bold;
          line-height: 13px;
          margin-top: 11px;
        }
      }
    }
    .drill-detail-right-bottom {
      width: 100%;
      height: calc(100% - 95px);
      background: #f9fafc;
      border-radius: 8px;
      overflow: hidden;
    }
  }
  .drill-detail-left {
    min-width: 320px;
    width: 25%;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #f9fafc;
    border: 0px solid #888888;
    border-radius: 8px;
    margin-right: 17px;
    padding: 15px;
    .time-wrapper {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .time-box {
      width: 49%;
      height: 84px;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      padding: 20px 0 0 26px;
      .title {
        font-size: 14px;
        font-weight: 500;
        color: #5b5b5b;
        line-height: 15px;
      }
      .time {
        margin-top: 12px;
        font-size: 14px;
        font-family: DIN;
        font-weight: bold;
        color: #333333;
        line-height: 15px;
      }
      &.tianwen {
        background-image: url("~@/assets/img/天文时间.png");
      }
      &.zuozhan {
        background-image: url("~@/assets/img/作战时间.png");
      }
    }
    .step-wrapper {
      flex-grow: 1;
      overflow: auto;
      padding-top: 19px;
      padding-left: 5px;
      .description {
        overflow:hidden;
        text-overflow:ellipsis;
        display:-webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2; 
      }
      .el-card {
        cursor: pointer;
      }
      .el-card.active {
        border-color: @primary;
      }
    }
  }

  //@media screen and (min-width: 1080px) {
  //    body {
  //        .drill-detail-left {
  //            width: 25%;
  //        }
  //    }
  //}
  //@media screen and (max-width: 1080px) {
  //    body {
  //        .drill-detail-left {
  //            width: 320px;
  //        }
  //    }
  //}
}
</style>
